<template>
  <el-row :gutter="20">
    <!-- 左部form表单 -->
    <el-col :span="10" style="margin-left:50px">
      <el-card class="box-card">
        <!-- 左部头部 -->
        <div slot="header" style="background-color:#409EFF; color:white ">
          <span style="margin-left:30px; font-weight: bold;">
            <i class="el-icon-circle-plus-outline"></i>
            点击组员头像即可开始评分
          </span>
        </div>
        <!-- form表单 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-user"></i>
              职员编号：
            </span>
            <!-- <el-input v-model="form.id" style="width: 260px"></el-input> -->
            {{ form.id }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-connection"></i>
              职员姓名：
            </span>
            <!-- <el-input v-model="form.name" style="width: 260px"></el-input> -->
            {{ form.name }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-bank-card"></i>
              职员岗位：
            </span>
            <!-- <el-input v-model="form.region" style="width: 260px"></el-input> -->
            {{ form.region }}
          </el-form-item>

          <!-- <el-form-item label="评价时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>-->

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-notebook-2"></i>
              评价内容：
            </span>
            <br />
            <span>
              工作能力：
              <el-input
                placeholder="请打分 满分100"
                v-model="form.workAbility"
                style="width:160px;margin-bottom:15px"
              ></el-input>
            </span>
            <br />
            <span>
              工作效率：
              <el-input
                placeholder="请打分 满分100"
                v-model="form.workEfficiency"
                style="width:160px;margin-bottom:15px"
              ></el-input>
            </span>
            <br />
            <span>
              发展潜力：
              <el-input
                placeholder="请打分 满分100"
                v-model="form.developmentPotential"
                style="width:160px;margin-bottom:15px"
              ></el-input>
            </span>
            <br />
            <span>
              交流能力：
              <el-input
                placeholder="请打分 满分100"
                v-model="form.communicateAbility"
                style="width:160px"
              ></el-input>
            </span>
            <br />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交评分</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <!-- 右部选项卡 -->
    <el-col :span="10" style="margin-left:50px">
      <el-card class="box-card">
        <!-- 头部 -->
        <div slot="header" style="background-color:#009393; color:white ">
          <span style="margin-left:30px; font-weight: bold;">待评分组员</span>
        </div>
        <!-- 选项卡 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tab" style="height:540px">
          <!-- A组 -->
          <el-tab-pane label="A组" name="first">
            <span class="staff" @click="showData('1001', '张琪', '前端')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>张琪</b>
              </p>
            </span>
            <span class="staff" @click="showData('1002', '王娜', '后端')">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王娜</b>
              </p>
            </span>
            <span class="staff" @click="showData('1003', '赵丽', '测试')">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>赵丽</b>
              </p>
            </span>
            <!-- echart -->
            <el-card class="zhangqi">
              <div id="main" style="width: 430px;height:320px;"></div>
            </el-card>
          </el-tab-pane>

          <!-- B组 -->
          <el-tab-pane label="B组" name="second">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王亮</b>
              </p>
            </span>
            <span class="staff">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>汪芳</b>
              </p>
            </span>
          </el-tab-pane>

          <!-- C组 -->
          <el-tab-pane label="C组" name="third">
            <span class="staff">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>黄娜</b>
              </p>
            </span>
          </el-tab-pane>

          <!-- D组 -->
          <el-tab-pane label="D组" name="fourth">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>孔杰</b>
              </p>
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>


<script>
export default ({
  name: 'GivePoint',
  data() {
    return {
      activeName: 'first',
      form: {
        id: "请选择员工",
        name: '请选择员工',
        region: '请选择员工',
        workAbility: "",
        workEfficiency: "",
        developmentPotential: "",
        communicateAbility: ""
      },

    }
  },

  methods: {
    onSubmit() {
      if (this.form.id == "")
        alert("请选择员工")
      else if (
        this.form.workAbility == "" ||
        this.form.workEfficiency == "" ||
        this.form.developmentPotential == "" ||
        this.form.communicateAbility == ""
      )
        alert("请打分")
      else {
        alert("提交成功")
        console.log("submit!");
        this.reset()
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "年度综合评分"
        },
        tooltip: {},
        legend: {
          data: ['部门平均得分', '个人得分']
        },
        xAxis: {
          data: ['工作能力', '工作效率', '发展潜力', '交流能力']
        },
        yAxis: {},
        series: [
          {
            name: '部门平均得分',
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          },
          {
            name: '个人得分',
            type: 'bar',
            data: [26, 24, 18, 22, 23, 20, 27]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    reset() {
      this.form.id = "请选择员工"
      this.form.name = "请选择员工"
      this.form.region = "请选择员工"
      this.form.workAbility = ""
      this.form.workEfficiency = ""
      this.form.developmentPotential = ""
      this.form.communicateAbility = ""
    },
    showData(id, name, region) {
      this.form.id = id;
      this.form.name = name;
      this.form.region = region;
    }
  },
  mounted() {
    this.drawChart();
  }

});

</script>

<style lang="less" scoped>
.zhangqi {
  width: 500px;
  height: 300px;
  float: left;
  margin-top: 50px;
  margin-left: 20px;
}
.box-card {
  width: 580px;
}
.el-card /deep/ .el-card__header {
  padding: 0;
  line-height: 50px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.tab {
  height: 400px;
}
.staff {
  float: left;
  margin-right: 15px;
}
</style>
